<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    //实例化一个对象
    let p1 = {
        name: "张三",
        age: 18,
        run: function () {
            console.log(this.name + ":" + this.age);
        }
    }
    //调用对象的方法
    p1.run();
    //实例化空对象 然后动态添加属性和方法
    let p2 = {}
    p2.name = "刘备";
    p2.age = 30;
    p2.run = function () {
        console.log(this.name + ":" + this.age);
    }
    //调用方法
    p2.run();

    /*通过自定义对象封装数据*/
    let product = {title: "小米手机", price: 3000, num: 100}
    //通过数组封装多个商品的信息
    let arr = [{title: "小米手机", price: 3000, num: 100},
        {title: "华为电视", price: 4000, num: 200},
        {title: "蔚来汽车", price: 500000, num: 300}];
    let table = document.querySelector("table");
    //把数组显示到页面中
    for (let p of arr) {
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let numTd = document.createElement("td");
        //把遍历出来的商品信息装进td
        titleTd.innerText = p.title;
        priceTd.innerText = p.price;
        numTd.innerText = p.num;
        tr.append(titleTd,priceTd,numTd);//把td装进tr
        table.append(tr);//把tr装进表格
    }

</script>
</body>
</html>